<template>
    <div class="app-container">
        <!--搜索条件-->
        <el-row>
            <el-form>
                <el-col :span="9">
                    <el-form-item label="订单号">
                        <el-input style="width: 280px;" v-model="searchObj.id" placeholder="请输入订单号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="订单状态">
                        <el-select v-model="searchObj.status" placeholder="请选择订单状态" clearable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                       :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6" style="min-height: 1px;">
                </el-col>
                <el-col :span="6">
                    <el-button icon="el-icon-refresh" @click="reset"
                               style="float: right;margin-left: 10px;"
                    >重置
                    </el-button>
                    <el-button type="primary" icon="el-icon-search" @click="getOrders"
                               style="float: right;"
                    >搜索
                    </el-button>
                </el-col>
            </el-form>
        </el-row>
        <el-divider></el-divider>
        <el-row style="margin-bottom: 20px;">
            <el-button type="warning" plain @click=""
                       style="float: right"
                       icon="el-icon-data-analysis"
            >导出
            </el-button>
        </el-row>

        <el-table v-loading="loading" :data="orders" stripe border style="width: 100%;margin-top: 10px;" size="medium">
            <el-table-column label="序号" width="70" align="center" fixed>
                <template slot-scope="scope">
                    {{ (pageNum - 1) * pageSize + scope.$index + 1 }}
                </template>
            </el-table-column>
            <el-table-column prop="orderId" label="订单号" align="center" width="320" fixed></el-table-column>
            <el-table-column prop="username" label="用户名" align="center" width="80"></el-table-column>
            <el-table-column prop="createDate" label="下单时间" align="center" width="220"></el-table-column>
            <el-table-column label="订单金额" align="center" width="100">
                <template slot-scope="scope">
                    {{ scope.row.totalPrice }}元
                </template>
            </el-table-column>
            <el-table-column label="图书数量" align="center" width="80">
                <template slot-scope="scope">
                    {{ scope.row.totalNum }}本
                </template>
            </el-table-column>
            <el-table-column label="订单状态" align="center" width="140">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status === 1" type="danger" effect="dark">未支付</el-tag>
                    <el-tag v-else-if="scope.row.status === 2" effect="dark">未发货</el-tag>
                    <el-tag v-else-if="scope.row.status === 3" type="warning" effect="dark">未收货</el-tag>
                    <el-tag v-else-if="scope.row.status === 4" type="success" effect="dark">已收货</el-tag>
                    <el-tag v-else-if="scope.row.status === 5" type="info" effect="dark">已关闭</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="receiveUsername" label="收件人" align="center"
                             width="100"
            ></el-table-column>
            <el-table-column prop="receivePhone" label="收件人电话" align="center"
                             width="150"
            ></el-table-column>
            <el-table-column prop="receiveAddress" label="收获地址" align="center" :show-overflow-tooltip="true"
                             width="400"
            ></el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" icon="el-icon-view"
                               @click="showDetail(scope.row.orderId)" style="color: #919398"
                    >详情
                    </el-button>
                    <el-button type="text" v-if="scope.row.status === 1" icon="el-icon-circle-close"
                               @click="close(scope.row.orderId)" title="关闭订单" style="color: #E47370"
                    >关闭
                    </el-button>
                    <el-button type="text" v-if="scope.row.status === 2" icon="el-icon-edit"
                               @click="delivery(scope.row.orderId)" style="color:#5A9CF8;"
                    >发货
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-divider></el-divider>
        <!-- 分页组件 -->
        <el-pagination :page-size.sync="pageSize" layout="total, sizes, prev, pager, next, jumper"
                       :total="total" :page-sizes="[5,10, 20, 30, 40]" :current-page.sync="pageNum"
                       @current-change="getOrders"
                       @size-change="getOrders"
        />

        <!-- 发货表单 -->
        <el-dialog title="填写发货信息" :visible.sync="dialogFormVisible" width="600px">
            <el-form :model="deliveryForm" label-width="80px" :rules="rules" ref="deliveryForm">
                <el-form-item label="订单编号">
                    <el-input v-model="deliveryForm.orderId" autocomplete="off" disabled size="medium"
                              style="width: 400px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="快递单号" prop="trackingNumber">
                    <el-input type="number" v-model="deliveryForm.trackingNumber" autocomplete="off"
                              style="width: 400px;"
                    ></el-input>
                </el-form-item>
                <el-form-item label="配送方式" prop="distributionMode">
                    <el-select v-model="deliveryForm.distributionMode" placeholder="请选择配送方式"
                               style="width: 400px;"
                               clearable
                    >
                        <el-option label="站点配送" value="站点配送"></el-option>
                        <el-option label="官方直达" value="官方直达"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveDelivery">确 定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getPageOrder, closeOrder, delivery } from '@/api/order'

export default {
    data() {
        return {
            options: [
                {
                    value: 1,
                    label: '未支付'
                },
                {
                    value: 2,
                    label: '未发货'
                },
                {
                    value: 3,
                    label: '未收货'
                },
                {
                    value: 4,
                    label: '已收货'
                },
                {
                    value: 5,
                    label: '已关闭'
                }
            ],
            pageNum: 1,
            pageSize: 5,
            total: 0,
            loading: true,
            orders: [],
            searchObj: {},
            dialogFormVisible: false,
            deliveryForm: {},
            rules: {
                trackingNumber: [{ required: true, message: '快递单号不能为空', trigger: 'blur' }],
                distributionMode: [{ required: true, message: '配送方式不能为空', trigger: 'blur' }]
            }
        }
    },
    methods: {
        // 获取订单数据
        getOrders() {
            getPageOrder(this.pageNum, this.pageSize, this.searchObj).then(response => {
                this.orders = response.data.list
                this.total = response.data.total
                this.loading = false
            })
        },

        // 点击重置按钮
        reset() {
            this.searchObj = {}
            this.getOrders()
        },

        // 点击查看详情按钮，跳转路由
        showDetail(orderId) {
            this.$router.push({
                path: '/order/orderDetail',
                query: {
                    orderId
                }
            })
        },

        // 关闭订单
        close(orderId) {
            this.$confirm('确定要关闭该订单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                closeOrder(orderId).then(response => {
                    if (response.code === 200) {
                        this.$message.success('成功关闭该订单')
                        this.getOrders()
                    } else {
                        this.$message.error(response.message)
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        },

        // 点击发货按钮
        delivery(orderId) {
            this.dialogFormVisible = true
            this.deliveryForm.orderId = orderId
        },

        saveDelivery() {
            this.$refs.deliveryForm.validate((valid) => {
                // 校验成功
                if (valid) {
                    delivery(this.deliveryForm).then(response => {
                        if (response.code === 200) {
                            this.$message.success('发货成功')
                            this.dialogFormVisible = false
                            this.deliveryForm = {}
                            this.getOrders()
                        } else {
                            this.$message.error(response.message)
                        }
                    })
                } else {
                    this.$message.error('指定参数不能为空！')
                    return false
                }
            })
        }
    },
    created() {
        this.getOrders()
    }
}
</script>

<style>
.app-container {
    margin: 20px;
}

.item {
    margin: 4px;
}
</style>
